<template>
	<uni-nav-bar fixed="true" statusBar="true" border="false" title="行程"></uni-nav-bar>
	<view class="container">
		<view class="uni-padding-wrap mb100">
			<swiper class="index-swiper" :indicator-dots="false" :autoplay="true" :interval="5000" :duration="1000">
				<swiper-item v-for="(item,index) in bannerList" :key="index" @tap="navgetTo('pages/my/news_center','','')">
					<image :src="item.bannerUrl" alt="" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<view class="xf-wrap">
				<view class="uni-flex m450">
					<text class="current-trip">当前行程</text>
					<text class="create-trip" @tap="navgetTo('pages/my/select_root','','')">发起组队>></text>
				</view>
				<view class="vt50 tc" v-if="List.length == 0">
					<view>暂无组队行程计划</view>
					<text class="uni-primary color-blue" @tap="navgetTo('pages/schdule/history_schdule','','')">历史行程>></text>
				</view>
				<view class="foot-list uni-flex uni-row">
					<view class="foot-card" v-if="List.length>0" v-for="item in List" @tap="navgetTo('pages/schdule/schdule_detail',item.id)">
						<image class="foot-avatar" :src="item.coverUrl"></image>
						<view class="p010">
							<text class="foot-name">{{item.itineraryTitle}}</text>
							<view class="uni-flex">
								<text class="sign-num">已报{{item.memberCount}}/{{item.userLimit}}</text>
								<text class="sign-status uni-warning" v-if="item.itinerarySta == 'ZT'">组队中</text>
								<text class="sign-status uni-success" v-if="item.itinerarySta == 'W'">待出行</text>
								<text class="sign-status uni-primary" v-if="item.itinerarySta == 'I'">出行中</text>
								<text class="sign-status uni-default" v-if="item.itinerarySta == 'O'">已完成</text>
								<text class="sign-status uni-default" v-if="item.itinerarySta == 'X'">已取消</text>
							</view>
							<view class="sign-time">
								<text>{{item.collectDate}}集合</text>
							</view>
						</view>
					</view>
				</view>
				<view class="mb45 tc" v-if="List.length > 0">
					<text class="color-blue" @tap="navgetTo('pages/schdule/history_schdule','','')">历史行程>></text>
				</view>
				<!-- 加载提示 -->
				 <view class="tc mb100">{{loadMoreText}}</view>
			</view>
		</view> 
		<loginwx ref="login"></loginwx>
	</view>
</template>

<script>
	import api from '@/common/api/webapi.js'; /*api*/
	import storageUtil from '@/common/util/storageUtil.js';
	import loginwx from '@/components/login-wx/loginwx.vue';
	export default {
		components: {
			loginwx
		},
		data() {
			return {
				bannerList:[],
				loadMoreText:"",
				userLoginFlag: false,
				List:[],
				param: {
					page: 1, //当前页
					limit: 10, //每页显示记录数
					PageCount: 0,
					pageType:"FRONT",
				},
			}
		},
		onShow() {
		  // 每次页面显示时都检查登录状态并重新加载数据
		  this.checkIsLogin();
		  // 重置页面滚动位置到顶部
		  uni.pageScrollTo({
		    scrollTop: 0,
		    duration: 0 // 无动画直接跳转
		  });
		},
		onLoad(option) {
			this.checkIsLogin();
		},
		onPullDownRefresh() {
			// 下拉刷新时触发的逻辑
			this.param.page = 1;
			this.getPageList('onPullDownRefresh');
		},
		onReachBottom() {
		    // 触发加载更多逻辑
		    this.param.page = (this.param.page + 1);
			if (this.param.page > this.param.PageCount) {
				this.isLoading = true;
				this.loadMoreText = "--到底啦--"
				return;
			}
			this.getPageList('onReachBottom');
		},
		methods: {
			checkIsLogin() {
				let userLoginFlag = storageUtil.getStorageData("isLogin");
				console.log("userLoginFlag",userLoginFlag);
				if(userLoginFlag){
					this.userLoginFlag = true;
					this.getBannerList();
					this.param.page = 1;
					this.getPageList('onPullDownRefresh');
				}else{
					this.userLoginFlag = false;
					this.popShowHandle();
					return;
				}
			},
			// 城市选择器
			bindRegionChange: function (e) {
			    this.region = e.detail.value;
			},
			navgetTo(page, param, type) {
				if (param != undefined) {
					type = type || '';
					let data = {
						data: param,
						page: type
					}
					uni.navigateTo({
						url: "/" + page + "?param=" + encodeURI(JSON.stringify(data))
					});
				} else {
					uni.navigateTo({
						url: "/" + page
					});
				}
			},
			popShowHandle() {
				setTimeout(() => {
					let _this = this;
					_this.$refs.login.open()
				}, 50);
			},
			// 获取banner图
			getBannerList(){
				let params = {};
				api.getBannerList(params).then(res => {	
					if (res.code === 0) {
						if (res.data.length > 0) {
							this.bannerList = res.data;
						}			
					} else {}
				}).catch()
			},
			// 获取分页列表
			getPageList(type) {
				let _this = this;
			
				let requestData = {
					params: { 
						page: _this.param.page, //当前页
						size: _this.param.limit, //每页显示记录数
						pageType:_this.param.pageType, //后端区分是行程首页还是历史行程
						keyword:"",
					}
				}
				api.getHistoryPageList(requestData).then(res => {
					if (res.code === 0) {
						if (res.data.length > 0) {
							let pagelist = res.data;
							_this.param.PageCount = Math.ceil(res.data.total / _this.param.limit);
							if (type == "onReachBottom") {
								_this.List = _this.List.concat(pagelist)
							} else {
								_this.List = pagelist;
							}
						}else{
							if(type == "onPullDownRefresh"){
								_this.List = [];
							}else if(type == "onReachBottom"){
								this.loadMoreText = "--到底啦--"
							}
						}
					} else {}
					uni.stopPullDownRefresh();
				}).catch(function(){
					uni.stopPullDownRefresh();
				})
			
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		font-size: 14px;
		line-height: 24px;
	}

	.index-swiper {
		width: 100%;
		height: 400rpx;
	}

	.index-swiper image {
		width: 100%;
		height: 100%;
		object-fit: contain;
		border-radius: 30rpx;
	}
	.mb45{
		margin-bottom: 45rpx;
	}
	.m450{
		margin: 45rpx 0;
	}
	.p15 {
		padding: 15px;
	}
	.p010{
		padding: 0 10px;
	}

	.uni-padding-wrap {
		padding: 0 15px;
	}

	.xf-wrap {
		position: relative;
		overflow: hidden;
	}
	.box-shadow{
		box-shadow: 5rpx 5px 10rpx $uni-text-color-grey8;
		background-color: #ffffff;
		border-radius: 20rpx;
	}

	.xf-wrap input {
		font-weight: bold;
	}

	.uni-flex {
		display: flex;
		justify-content: space-between;
	}

	.uni-row {
		flex-direction: row;
	}

	.flex-item {
		width: 50%;
		text-align: left;
		line-height: 80rpx;
	}
	.current-trip{
		color: $uni-text-color-blue;
		font-size: 28rpx;
		font-weight: bold;
		padding: 0 15rpx;
		border-bottom: 1px solid $uni-text-color-blue;
	}
	.create-trip{
		color: $uni-text-color-light-blue;
		font-size: 26rpx;
	}
	.foot-list{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		row-gap: 2%;
	}
	.foot-card{
		width: 48%;
		// height: 390rpx;
		background-color: #fff;
		border-radius: 20rpx;
		position: relative;
		margin-bottom: 30rpx;
		box-shadow: 2rpx 2rpx 15rpx #888888;
	}
	.foot-avatar{
		width: 100%;
		height: 425rpx;
		border-top-right-radius: 20rpx;
		border-top-left-radius: 20rpx;
	}
	.foot-name{
		font-size: 28rpx;
		color: #000;
	}
	.sign-num{
		font-size: 26rpx;
		color: #888;
	}
	.sign-status{
		font-size: 26rpx;
		// color: #888;
		border: 1px solid #888;
		border-radius: 10rpx;
		padding: 0 15rpx;
		margin-bottom: 15rpx;
	}
	.sign-status.uni-warning{
		color: $uni-text-color-orange;
		border: 1px solid $uni-text-color-orange;
	}
	.sign-status.uni-success{
		color: $uni-text-color-green;
		border: 1px solid $uni-text-color-green;
	}
	.sign-status.uni-primary{
		color: $uni-text-color-blue;
		border: 1px solid $uni-text-color-blue;
	}
	.sign-status.uni-default{
		color: #000;
		border: 1px solid #888;
	}
	.sign-time{
		position: absolute;
		top: 10rpx;
		width: 98%;
		left: 0;
		right: 0;
		margin: auto;
		background-color: rgba(0, 0, 0, 0.6);
		height: 45rpx;
		color: #fff;
		font-size: 24rpx;
		border-radius: 20rpx;
		padding: 0 10rpx;
		box-sizing: border-box;
	}
</style>